<template>
  <Table
    :row-class-name="rowClassName"
    :columns="colData"
    :data="resTableData"
    :height="height"
    :max-height="height"
    :highheight-row="highheightRow"
  ></Table>
  <!-- <Card style="height:450px;width:100%;min-height:400px;background: #01237C;">
    <p slot="title" style="padding-left:30px;">
      <Icon type="ios-film-outline"></Icon>
      事件通知
    </p>
    <ul
      style="text-align:left; padding:10px 0px; list-style:none;color:#fff;font-size:1.6rem;"
    >
      <li v-for="event in eventList" :key="event.name">
        <Row style="width=100%">
          <Col :span="12">
            <span>{{ event.name }}</span>
          </Col>
          <Col :span="12">
            <span>{{ event.date }}</span>
          </Col>
        </Row>
      </li>
    </ul>
  </Card> -->
</template>

<script>
export default {
  name: "myNotice",
  props: {
    noticeList: {
      type: Array
    }
  },
  computed: {
    resTableData: function() {
      return this.noticeList.map(ele => {
        ele.cellClassName = {
          status:
            ele.status === "合规"
              ? "demo-table-info-cell-legal"
              : "demo-table-info-cell-illegal"
        };
        return ele;
      });
    }
  },
  mounted() {},
  data() {
    return {
      height: 500,
      highheightRow: true,
      newTableData: [],
      colData: [
        { title: "事件名称", key: "action", width: "160", align: "center" },
        { title: "事件状态", key: "status", width: "120", align: "center" },
        { title: "发生时间", key: "datetime", width: "auto", align: "center" }
      ]
    };
  },
  methods: {
    rowClassName() {
      return "demo-table-info-row";
    }
  }
};
</script>

<style lang="less">
.ivu-table {
  color: #fff !important;
  overflow-x: hidden !important;
  background-color: #01237c !important;
  overflow-y: hidden !important;
}
.ivu-table .demo-table-info-row td {
  font-size: 16px;
}
.ivu-table .demo-table-info-cell-legal {
  color: #18b566;
  font: bold;
}
.ivu-table .demo-table-info-cell-illegal {
  color: #f29100;
  font: bold;
}
</style>
